<template>
  <view id="swipeThree">
    <swiper class="swiper-box" @change="change" :current="swiperDotIndex">
      <swiper-item v-for="(item, index) in lists" :key="index" :style="styleRef">
        <view
          class="swiper-item"
          v-for="i in item"
          :key="i"
          :class="'swiper-item' + index"
          @click="indexClick(i)"
        >
          <text style="color: #000; font-size: 32px; width: 100px; display: flex">{{ i }}</text>
        </view>
      </swiper-item>
    </swiper>

    <view>
      <!-- 普通弹窗 -->
      <uni-popup ref="popup" background-color="#fff">
        <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"
          ><text class="text">当前index {{ index1 }}</text></view
        >
      </uni-popup>
    </view>
  </view>
</template>

<script setup lang="ts">
const current = ref(0)
const swiperDotIndex = ref(0)
const lists = ref([[1, 2, 3], [4, 5, 6], [7]])

const styleRef = {
  height: '200px',
  display: 'flex',
  'flex-wrap': 'nowrap',
  'flex-direction': 'row',
  'justify-content': 'space-around',
  'align-items': 'center',
  'text-align': 'center',
}

/**
 * @desc 监测swipe页码变化的方法
 */
function change(e: any) {
  current.value = e.detail.current
  console.log(`当前页码${current.value + 1}`)
}

const type = ref('')
const popup = ref()
/**
 * 点击窗体传入对应的值并展示
 * @param index
 */
const index1 = ref(0)
function indexClick(index: number) {
  index1.value = index
  console.log(`当前index  ${index}`)
  type.value = 'center'
  // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
  popup.value.open(type)
}
</script>

<style lang="scss" scoped>
//
.swiper-box {
  height: 200px;
  width: 100vw;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  width: 100px;
  display: flex;
  /* #endif */
  width: 30vw;
  height: 200px;
  color: #000;
}

.swiper-item0 {
  background-color: #cee1fd;
}

.swiper-item1 {
  background-color: #b2cef7;
}

.swiper-item2 {
  background-color: #cee1fd;
}
</style>
